<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			#dv1{
				margin-left: -20px;
				line-height: 50px;
				height: 50px;
			}
			.mui-content #dv1 .in1{
				width: 77%;
				padding: 0 33px;
			}
			#img1{
				position: relative;
				left: 33px;
				top: 5px;
			}
		</style>
	</head>

	<body>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">我的关注</h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded" id="dv1">
				<img src="img/search.jpg" id="img1"/>
				<input class="in1" type="text" name="" id="" value="" placeholder="搜索关注的人"/>
				<button style="margin-top: 9px;" type="button" class="mui-btn mui-btn-blue">搜索</button>
			</div>
		    <ul class="mui-table-view">
		        <li class="mui-table-view-cell mui-media">
		            <a href="javascript:;" class="mui-slider-handle">
		                <img class="mui-media-object mui-pull-left" src="">
		                <div class="mui-media-body">
		                  	<span>小海绵宝宝</span>
		                    <p class="mui-ellipsis">个性签名:我觉得我好方好方好方好方好方好方好方好方好方好方好方好方</p>
		                </div>
		            </a>
		            <div id="" class="mui-slider-right">
		            	<button type="button" class="mui-btn mui-btn-red">取消关注</button>
		            </div>
		        </li>
		        <li class="mui-table-view-cell mui-media">
		            <a href="javascript:;" class="mui-slider-handle">
		                <img class="mui-media-object mui-pull-left" src="">
		                <div class="mui-media-body">
		               		<span>派大星</span>
		                    <p class="mui-ellipsis">个性签名:我是最粉红的那颗星</p>
		                </div>
		            </a>
		             <div id="" class="mui-slider-right">
		            	<button type="button" class="mui-btn mui-btn-red">取消关注</button>
		            </div>
		        </li>
		        <li class="mui-table-view-cell mui-media">
		            <a href="javascript:;" class="mui-slider-handle">
		                <img class="mui-media-object mui-pull-left" src="">
		                <div class="mui-media-body">
		                    <span>章鱼哥</span>
		                    <p class="mui-ellipsis">个性签名:海绵宝宝，你能不能安静点，吵死了</p>
		                </div>
		            </a>
		             <div id="" class="mui-slider-right">
		            	<button type="button" class="mui-btn mui-btn-red">取消关注</button>
		            </div>
		        </li>
		    </ul>
		</div>
	</body>
	<script type="text/javascript">
		var fansCount = 3;//粉丝的数量
		var lii = document.getElementsByTagName("li");
		for(var i=0;i<fansCount;i++){
			lii[i].firstElementChild.firstElementChild.src="img/p"+i+".png";
		}
		mui("li").on("tap","button",function(){
			this.parentNode.parentNode.remove();
		});
	</script>
</html>